!!!
%html{lang: I18n.locale}
  %head
    %title= metadata[:title]
    %meta{charset: 'utf-8'}
    %meta{name: "viewport", content: "width=device-width, initial-scale=1.0" }
    %meta{:content => metadata[:title], :property => "og:title"}
    %meta{:content => metadata[:description], :name => "description", :property => "og:description"}
    - metadata.fetch(:image_urls, []).each do |image_url|
      %meta{:content => image_url, :property => "og:image"}
    %meta{:content => AppConfig.theme[:site_name], :property => "og:site_name"}
    %meta{:content => "website", :property => "og:type"}
    %link{rel: "canonical", href: url_for(:only_path => false, :protocol => 'https')}
    %link{rel: "icon", href: AppConfig.theme[:icon_src]}

    = raw vue_css_includes
    - if !params[:export] && !browser.bot?
      = raw vue_js_includes

    :css
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #loading-placeholder {
        position: fixed;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: #f0f0f0;
        justify-content: center;
      }

      @media (prefers-color-scheme: dark) {
        #loading-placeholder {
          background-color: #1B1B1B;
        }
      }

      #loading-placeholder img, #loading-placeholder svg {
        max-width: 256px;
        height: auto;
      }
  %body
    #app
      #loading-placeholder
        - if logo_svg
          = logo_svg
        - else
          %img{src: AppConfig.theme[:app_logo_src]}
